<template>
  <div class="saleHoliday">
    <div class="title">特惠度假</div>
    <div class="selectBtn">
      <!--设置<button>的样式在style里面设置-->
      <!--设置按钮的背景颜色使用background-->
      <!--设置按钮内部字体颜色使用color-->
      <!--设置按钮的边框颜色使用border-color-->
      <a-button type="primary" class="btn">当季热门度假</a-button>
      <a-button type="primary" class="btn" style="background: white;border-color: black; color: black">今日特惠度假</a-button>
    </div>
    <div class="selectList">
      <div class="destination" :key="item.id" v-for="item in list">
        <img :src="item.imgUrl" class="picture" alt="pic">
        <div class="holidayInfo">
          <div class="introduce">
            <!--此处div与span的设置有明显区别，当设置为div时，明显为block-->
            <div class="details" >{{item.details}}</div>
            <div class="price">{{item.price}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="moreInfo">
      <a-button type="primary" class="toMoreInfo" style="width: 6.5rem; height: .8rem; background: white; color: #00bcd4">
        更多特惠度假
        <span class="iconfont">&#xe612;</span>
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSale',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/commStyle.styl"
.saleHoliday
  width: 100%
  height: 10rem
  margin-top: .5rem
  .moreInfo
    width: 100%
    margin-bottom: 0.08rem
    margin-top: .2rem
  .selectList
    margin-top: .2rem
    /* 只有设置了flex布局，才可以设置flex-wrap: wrap */
    display: flex
    /* 当一行放不下时，可以换行 */
    flex-wrap: wrap
    width: 100%
    /* 设置高度，接下来两行列表的高度各占3.1rem */
    height: 6.2rem
    .destination
     width: 50%
     height: 3.1rem
     .holidayInfo
      margin-top: .1rem
      /* 设置holidayInfo的高度，方便调节内部元素的位置 */
      height: .8rem
      position: relative
      .introduce
        padding-top: .1rem
        .details
         width: 3rem
         margin-bottom: .1rem
        .price
         width: 1.2rem
         color: red
         font-size: large
         font-weight: bold
     .picture
      width: 95%
      height: 70%
  .selectBtn
    /* 设置content的宽度 */
    width: 4.3rem
    margin-left: .16rem
    margin-bottom: .08rem
    margin-top: .2rem
    .btn
     background: $bgColor
     margin-right: .1rem
     padding: .1rem
  .title
    width: 1.5rem
    margin-left: .16rem
    margin-bottom: .08rem
    margin-top: .1rem
    font-weight: bold
    font-size: large
    .toMoreInfo
      background: white
      font-color: $bgColor
</style>
